<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <button @click="reset">重置</button>
        <div :key="containerKey" id="container" style="height: 300px;border: 1px solid red;overflow: auto">
            <div v-for="item in num" :key="item" style="height: 100px;border: 1px solid blue"></div>

        </div>
    </div>

    <script src="../depends/vue@3.4.23.js"></script>
    <script>
        const { createApp, ref, onMounted, nextTick } = Vue
        createApp({
            setup() {
                function scrollFunction() {
                    const scrollHeight = this.scrollHeight;
                    const scrollTop = this.scrollTop;
                    const clientHeight = this.clientHeight;
                    if (scrollTop + clientHeight >= scrollHeight) {
                        console.log('已到达底部');
                        num.value += 5
                    }
                }
                onMounted(() => {
                    document.querySelector('#container').addEventListener('scroll', scrollFunction)
                })
                const num = ref(5);
                const containerKey = ref(new Date().getTime());
                function reset() {
                    num.value = 5;
                    containerKey.value = new Date().getTime();
                    nextTick(() => document.querySelector('#container').addEventListener('scroll', scrollFunction))
                }
                return {
                    num,
                    containerKey,
                    reset
                }
            }
        }).mount('#app')
    </script>
</body>
</html>
